<script lang="ts" setup>
import {Maximize, Minimize} from '@/plugins/iconify/core';

import {useFullscreen} from '@vueuse/core';

import {JcxIconButton} from '../button';

defineOptions({name: 'FullScreen'});

const {isFullscreen, toggle} = useFullscreen();

// 重新检查全屏状态
isFullscreen.value = !!(
    document.fullscreenElement ||
    // @ts-ignore
    document.webkitFullscreenElement ||
    // @ts-ignore
    document.mozFullScreenElement ||
    // @ts-ignore
    document.msFullscreenElement
);
</script>
<template>
  <JcxIconButton @click="toggle">
    <Minimize v-if="isFullscreen" class="text-foreground size-4"/>
    <Maximize v-else class="text-foreground size-4"/>
  </JcxIconButton>
</template>
